<template>
	<view>
		<view class="top-photo" :style="'background-image: url('+info.top_photo+')'">
			<view class="text-center padding-xl">
				<image class="top-avatar cu-avatar round " :src=info.face mode=""></image>
				<view class="top-name margin-top">
					<text>{{info.name}}</text>
				</view>
			</view>
			<view class="top-status">
				<view class="grid text-center col-2 margin-sm ">
					<view class="">
						<view class="">
							关注数
						</view>
						<text>{{toNumberW(status.following)}}</text>
					</view>
					<view class="">
						<view class="">
							粉丝数
						</view>
						<text>{{toNumberW(status.follower)}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="margin-top">
			<view v-for="(item,index) in space.cards" :key="index" class="cu-card dynamic">
				<view v-if="item.desc.type == 1" class="cu-card">
					<view class="cu-item">
						<view class="cu-list menu-avatar">
							<view class="cu-item ">
								<image class="cu-avatar round lg" :src=item.desc.user_profile.info.face
									mode="aspectFill"></image>
								<view class="content flex-sub">
									<view>{{item.desc.user_profile.info.uname}}</view>
									<view class="text-gray text-sm flex justify-between">
										{{reWriteDate(item.desc.timestamp)}}
									</view>
								</view>
							</view>
						</view>
						<view class="text-content margin">
							{{item.card.item.content}}
						</view>
						<view class="cu-card">
							<view class="cu-item  bg-pink padding">
								<view class="cu-list menu-avatar">
									<view class="cu-item">
										<image class="cu-avatar round" :src=(toJson(item.card.origin).owner||{}).face
											mode="aspectFill"></image>
										<view class="content flex-sub text-gray">
											<view>{{(toJson(item.card.origin).owner||{}).name}}</view>
											<view class="text-gray text-sm flex justify-between">
												{{reWriteDate(toJson(item.card.origin).ctime)}}
											</view>
										</view>
									</view>
								</view>

								<view class="content">
									<view class="text-gray text-content text-df">
										{{toJson(item.card.origin).dynamic}}
									</view>
									<image :src=toJson(item.card.origin).pic mode="aspectFit"></image>
								</view>
							</view>
						</view>


						<view class="text-gray text-sm text-right padding">
							<text class="cuIcon-forwardfill text-pink margin-lr-xs"></text> {{item.desc.repost}}
							<text class="cuIcon-messagefill text-pink margin-lr-xs"></text> {{item.desc.comment}}
							<text class="cuIcon-appreciatefill text-pink margin-lr-xs"></text> {{item.desc.like}}
						</view>
					</view>

				</view>
				<!-- 图片动态 -->
				<view v-else-if="item.desc.type == 2">
					<view class="cu-card ">
						<view class="cu-item shadow">
							<view class="cu-list menu-avatar">
								<view class="cu-item">
									<image class="cu-avatar round lg" :src=item.desc.user_profile.info.face
										mode="aspectFill"></image>
									<view class="content flex-sub">
										<view>{{item.desc.user_profile.info.uname}}</view>
										<view class="text-gray text-sm flex justify-between">
											{{reWriteDate(item.desc.timestamp)}}
										</view>
									</view>
								</view>
							</view>
							<view class="text-content margin">
								{{item.card.item.description}}
							</view>
							<view class="grid flex-sub padding-lr col-3 grid-square">
								<view v-for="(item_1,index_1) in item.card.item.pictures" :key="index_1" class="bg-img">
									<image :src=item_1.img_src mode="aspectFit"></image>
								</view>
							</view>
							<view class="text-gray text-sm text-right padding">
								<text class="cuIcon-forwardfill text-pink margin-lr-xs"></text> {{item.desc.repost}}
								<text class="cuIcon-messagefill text-pink margin-lr-xs"></text> {{item.desc.comment}}
								<text class="cuIcon-appreciatefill text-pink margin-lr-xs"></text> {{item.desc.like}}
							</view>
						</view>
					</view>
				</view>
				<!-- 视频投稿动态 -->
				<view v-else-if="item.desc.type == 8">
					<view class="cu-card ">
						<view class="cu-item shadow">
							<view class="cu-list menu-avatar">
								<view class="cu-item">
									<image class="cu-avatar round lg" :src=item.desc.user_profile.info.face
										mode="aspectFill"></image>
									<view class="content flex-sub">
										<view>{{item.desc.user_profile.info.uname}}</view>
										<view class="text-gray text-sm flex justify-between">
											{{reWriteDate(item.desc.timestamp)}} &nbsp; 投稿了视频
										</view>
									</view>
								</view>
							</view>
							<view class="text-content margin">
								{{item.card.title}}
							</view>
							<view class="flex-sub padding-lr margin-bottom">
								<view class="bg-img padding-top-xl flex align-end"
									:style="'background-image: url('+item.card.pic+');'" style="height: 450upx;"
									@tap="toVideoPlay(item.card.aid,item.card.short_link)">
									<view class="bg-shadeBottom padding padding-top-xl flex-sub">
										<text class="cuIcon-timefill text-pink margin-lr-xs"></text>
										{{videoTime(item.card.duration)}}
										<text class="cuIcon-playfill text-pink margin-lr-xs"></text>
										{{item.card.stat.view}}
										<text class="cuIcon-newsfill text-pink margin-lr-xs"></text>
										{{item.card.stat.danmaku}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		api
	} from '../../common/api.js';
	import {
		toNumberW,
		UID
	} from '../../common/helper.js';
	export default {
		data() {
			return {
				info: {},
				space: {},
				spaceNext: '',
				status: {},
				upStatus: {}
			}
		},
		onLoad() {
			let data = {
				mid: UID,
				jsonp: 'jsonp'
			}
			uni.request({
				url: api.info,
				data: data,
				success: (res) => {
					this.info = res.data.data;
				}
			})
			this.getSpace()
			this.getStatus()
			this.getUpStatus()
		},
		onReachBottom() {
			this.getSpaceHistory()
		},
		methods: {
			toJson(str) {
				return (JSON.parse(str));
			},
			getStatus() {
				let data = {
					vmid: UID,
					jsonp: 'jsonp'
				}
				uni.request({
					url: api.status,
					data: data,
					success: (res) => {
						this.status = res.data.data;
						console.log(this.status);
					}
				})
			},
			getUpStatus() {
				let data = {
					mid: UID,
					jsonp: 'jsonp'
				}
				uni.request({
					url: api.upStatus,
					data: data,
					success: (res) => {
						this.upStatus = res.data.data;
					}
				})
			},
			getSpace() {
				let data = {
					host_uid: UID,
					need_top: 1
				}
				uni.request({
					url: api.spaceHistory,
					data: data,
					success: (res) => {
						this.space = res.data.data
						for (let i = 0; i < this.space.cards.length; i++) {
							this.space.cards[i].card = JSON.parse(this.space.cards[i].card)
						}
						this.spaceNext = res.data.data.next_offset

					}
				})
			},
			getSpaceHistory() {
				let data = {
					host_uid: UID,
					offset_dynamic_id: this.spaceNext,
					need_top: 1
				}
				uni.request({
					url: api.spaceHistory,
					data: data,
					success: (res) => {
						for (let i = 0; i < res.data.data.cards.length; i++) {
							res.data.data.cards[i].card = JSON.parse(res.data.data.cards[i].card)
						}
						this.space.cards = this.space.cards.concat(res.data.data.cards)
						this.spaceNext = res.data.data.next_offset
					}
				})
			},
			reWriteDate(date) {
				date = new Date(parseInt(date) * 1000)

				function addZero(num) {
					if (num < 10)
						return "0" + num;
					return num;
				}
				return date.getFullYear() + "年" +
					addZero(date.getMonth() + 1) + "月" +
					addZero(date.getDate()) + "日 " +
					addZero(date.getHours()) + ":" +
					addZero(date.getMinutes());
			},
			toNumberW(number) {
				if (number > 10000) {
					number = number / 10000;
					number = number.toFixed(1);
					return number + 'W';
				}
				return number;
			},
			toVideoPlay(aid, bvid) {
				let index = bvid.lastIndexOf('/') + 1
				bvid = bvid.slice(index)
				console.log(bvid)
				uni.navigateTo({
					url: '../video/video?aid=' + aid + '&bvid=' + bvid
				})
			},
			prefixZero(num, n) {
				return (Array(n).join(0) + num).slice(-n);
			},
			videoTime(second) {
				return this.prefixZero(parseInt(second / 60), 1) + ':' + second % 60
			}
		}
	}
</script>

<style>
	.top-photo {
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		padding: 10upx;
	}

	.top-avatar {
		height: 200upx;
		width: 200upx;
	}

	.top-name {
		font-weight: 600;
		font-size: 60upx;
		color: #FFFFFF;
	}

	.top-status {
		position: relative;
		width: 90%;
		margin: 10upx auto;
		padding: 5upx;
		border-radius: 5px;
		background: rgba(255, 255, 255, .7);
	}
</style>
